<!DOCTYPE html>
<html>
<head>
  <title>observer</title>
</head>
<script type="text/javascript" src="./maybe.js"></script>
<style type="text/css">
  *{
    margin: 0;
    padding: 0;
  }
  .loading{
    width: 10px;
    height: 10px;
    margin: 0 auto;
    padding: 10px;
    border: 7px dashed #000000;
    border-radius: 50%;
    animation: move 3s infinite;
  }

  @keyframes move {
    50% {
      transform: rotate(180deg)
    }

    100% {
      transform: rotate(360deg)
    }
  }
</style>
<body>
  <div class="loading"></div>
<script type="text/javascript">
  Maybe.of({})
    .isArray()
    .map(val => console.log('val', val))
  const ObServer = (() => {
    const __messages = new WeakMap();

    class ObServer {
      constructor() {
        __messages.set(this, {});
      }

      regist(type, fn) {
        let messages = __messages.get(this);
        if(!messages[type]) {
          messages[type] = [fn]
        } else {
          messages[type].push(fn)
        }
      }

      fire(type, args = {}) {
        let messages = __messages.get(this);
        if(!messages[type]) return;
        let params = {
          type,
          args
        }
        messages[type].forEach(item => item.call(this, params))
      }

      remove(type, fn) {
        let messages = __messages.get(this);
        if(messages[type] instanceof Array){
          var i = messages[type].length - 1;
          for (; i >= 0; i--) {
            messages[type][i] === fn && messages[type].splice(i, 1)
          }
        }
      }
    }
    return ObServer;
  })();
  let msg = new ObServer();
  let msg1 = new ObServer();

  msg.regist('error', function(e) {
    console.log(e)
  })
  msg1.regist('error', function(e) {
    console.log(e)
  })
  msg.regist('error', function(e) {
    console.log(e)
  })
  msg1.regist('error', function(e) {
    console.log(e)
  })
  msg.fire('error', {
    msg: '这是一个警告'
  })
  msg1.fire('error', {
    msg: '这是一个警告1111'
  })
</script>
</body>
</html>